<template>
	<view>

		<view class="top">
			<block v-if="isLogin">
				<image :src="userinfo.avatarurl"></image>
				<view class="right">
					<view class="">{{userinfo.nickname}}</view>
					<view class="box" @click="goUserInfo">完善资料，让小U更懂你</view>
				</view>
			</block>
			<button v-else @click="goAfterLogin">登录/注册</button>
		</view>
		<view class="center">
			<view class="box1">
				<view class="">12</view>
				<view class="">我的收藏</view>
			</view>
			<view class="box1">
				<view class="">12</view>
				<view class="">浏览记录</view>
			</view>
			<view class="box1">
				<view class="">12</view>
				<view class="">我的红包</view>
			</view>
			<view class="box1">
				<view class="">12</view>
				<view class="">优惠券</view>
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="head_user_order">
			<view class="head_user_order_top" hover-class="touchOpacity" @click="goOrder(3)">
				<text>我的订单</text>
				<text>全部订单 > </text>
			</view>
			<view class="head_user_order_bottom">
				<view class="head_user_order_bottom_row" hover-class="touchOpacity" v-for="(item,index) in orders"
					:key="index" @click="goOrder(index)">
					<image :src="item.src"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- 功能菜单区域 -->
		<view class="resDetail">
			<view hover-class="touchOpacity" @click="goAddress">
				<label for="" class="resDetail_title">
					<image src="../../static/icon/address.png"></image>
					地址管理
				</label>
				<label for="" style="margin-right:40rpx;color:#333333;font-size: 24rpx;"> ></label>
			</view>
			<view class="" hover-class="touchOpacity">
				<label for="" class="resDetail_title">
					<image src="../../static/icon/wallet.png"></image>
					我的钱包
				</label>
				<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;">剩余200U币 ></label>
			</view>
			<view class="" hover-class="touchOpacity" @click="goCode">
				<label for="" class="resDetail_title">
					<image src="../../static/icon/QR_code.png"></image>
					我的二维码
				</label>
				<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;"> ></label>
			</view>
			<view class="" hover-class="touchOpacity">
				<label for="" class="resDetail_title">
					<image src="../../static/icon/partner.png"></image>
					我的小伙伴
				</label>
				<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;"> ></label>
			</view>
			<view class="" hover-class="touchOpacity">
				<label for="" class="resDetail_title">
					<image src="../../static/icon/free.png"></image>
					0元试用
				</label>
				<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;"> ></label>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		async onShow() {
			let res = await this.$isLogin(this)
			if (res) {
				this.isLogin = res
				// console.log(res);
				// console.log(this.$store.state.userInfo);
				this.userinfo = this.$store.state.userInfo
				// console.log(this.userinfo);
				this.userinfo.avatarurl = this.$baseUrl + this.userinfo.avatarurl
				// console.log(this.userinfo.avatarurl);
			} else {
				this.isLogin = res
			}
		},
		data() {
			return {
				isLogin: false,
				userinfo: {
					avatarul: '../../static/image/图1.png',
					nickname: '请登录'
				},
				orders: [{
						src: '../../static/icon/payment.png',
						name: '代付款'
					},
					{
						src: '../../static/icon/delivery.png',
						name: '代发货'
					},
					{
						src: '../../static/icon/evaluation.png',
						name: '代确认'
					},
					{
						src: '../../static/icon/service.png',
						name: '售后/退款'
					}
				]
			}
		},
		methods: {
			// 跳转登录页面
			goAfterLogin() {
				uni.navigateTo({
					url: "../afterLogin/afterLogin"
				})
			},
			// 跳转订单页面
			goOrder(index) {
				uni.navigateTo({
					url: '../orderlist/orderlist?status=' + index
				})
			},
			goUserInfo() {
				uni.navigateTo({
					url: '../userinfo/userinfo'
				})
			}
		}
	}
</script>

<style lang="scss">
	// @import url("../../uni.scss");

	.top {
		background-color: #ff6040;
		display: flex;
	}

	.top image {
		margin-top: 30rpx;
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}

	.right {
		margin-left: 10rpx;
		margin-top: 80rpx;
		color: white;
		line-height: 50rpx;
	}

	.box {
		border: 1rpx solid white;
	}

	.box1 {
		text-align: center;
		flex: 1;
	}

	.center {
		display: flex;
		background-color: #ff6040;
		color: white;
	}

	.orders {
		display: flex;
		justify-content: space-between;
	}

	.allOrders {
		display: flex;
	}

	.bot {
		display: flex;
	}

	.bot1 {
		flex: 1;
		text-align: center
	}

	.bottom {
		border: 1rpx solid black;
	}

	.head_user_order .head_user_order_top {
		width: 670rpx;
		height: 32rpx;
		margin: 20rpx 20rpx 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.head_user_order_top text:nth-of-type(1) {
		font-size: 32rpx;
		font-weight: bold;
	}

	.head_user_order_top text:nth-of-type(2) {
		font-size: 24rpx;
		color: #FF6040;
	}

	.head_user_order .head_user_order_bottom {
		width: 670rpx;
		height: 104rpx;
		margin: 20rpx 20rpx 0 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.head_user_order_bottom .head_user_order_bottom_row {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.head_user_order_bottom_row image {
		width: 64rpx;
		height: 64rpx;
	}

	.head_user_order_bottom_row text {
		font-size: 20rpx;
	}

	/* 功能菜单区域 */
	/* 结果明细 */
	.resDetail {
		width: 100%;
		background: #FFFFFF;
		padding: 0 20rpx 20rpx 20rpx;
		margin-top: 110rpx;
		overflow: hidden;
	}

	.resDetail .resDetail_title {
		font-size: 30rpx;
		font-weight: 600;
	}

	.resDetail view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		margin-top: 40rpx;
	}

	.resDetail image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 15rpx;
	}
</style>